<template>
    <div class="goods-list">
        <div class="search">
            <h1>| 搜索条件</h1>
            <div class="searchForm">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
                    <el-form-item label="商品名称">
                        <el-input v-model="searchForm.goodsname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品条形码">
                        <el-input v-model="searchForm.goodsid" placeholder="商品条形码"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select v-model="searchForm.goodsclass" placeholder="商品分类">
                        <el-option label="生活日用" value="daily"></el-option>
                        <el-option label="食物饮料" value="food"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌">
                        <el-select v-model="searchForm.goodsbrand" placeholder="商品品牌">
                        <el-option label="美的" value="shanghai"></el-option>
                        <el-option label="格力" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="searchForm.ex_status" placeholder="审核状态">
                            <el-option label="所有" value="all"></el-option>
                            <el-option label="待审核" value="ready"></el-option>
                            <el-option label="审核通过" value="over"></el-option>
                            <el-option label="审核不通过" value="fail"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="上架状态">
                        <el-select v-model="searchForm.sell_status" placeholder="上架状态">
                            <el-option label="所有" value="all"></el-option>
                            <el-option label="待上架" value="ready"></el-option>
                            <el-option label="上架" value="onsell"></el-option>
                            <el-option label="下架" value="outsell"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="listbox">
            <h1>| 商品列表</h1> 
            <div class="list_content">
                <div class="tabbar">
                    <el-form :inline="true" class="demo-form-inline" size="small">
                        <el-form-item label="请选择导出方式:">
                            <el-select placeholder="请选择导出方式:" v-model="operate" >
                            <el-option label="Excel文件" value="Excel"></el-option>
                            <el-option label="Word文件" value="word"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                        <el-button @click="onSearch">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onSearch">导入</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onSearch">转移分类</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onSearch">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onSearch">上架</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onSearch">下架</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="Delete()">删除</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="list_show">
                    <el-table
                        border
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                        type="selection"
                        fixed="left"
                        width="35">
                        </el-table-column>
                        <el-table-column
                        label="序号"
                        prop="id"
                        width="52">
                        </el-table-column>
                        <el-table-column
                        prop="goodsname"
                        label="商品照片"
                        width="90">
                        <template slot-scope="scope"><img :src="scope.row.url " alt="" style="width:100%;"></template>
                        </el-table-column>
                        <el-table-column
                        prop="sku"
                        label="供应商SKU号"
                        width="110"
                        show-overflow-tooltip>
                        </el-table-column>
                         <el-table-column
                        prop="goodsname"
                        label="商品名称"
                        width="90"
                        show-overflow-tooltip>
                        </el-table-column>
                         <el-table-column
                        prop="goodstype"
                        label="商品分类"
                        width="90"
                        show-overflow-tooltip>
                        </el-table-column>
                         <el-table-column
                        prop="goodsbrand"
                        label="商品品牌"
                        width="90"
                        show-overflow-tooltip>
                        </el-table-column>
                         <el-table-column
                        prop="ex_status"
                        label="审核状态"
                        width="90"
                        show-overflow-tooltip>
                        </el-table-column>
                         <el-table-column
                        prop="sell_status"
                        label="上下架状态"
                        width="95"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        width="270">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"><router-link :to="{name: 'addgoods', params: {sku:scope.row.sku}}" tag="span" >编辑商品</router-link></el-button>
                            <el-button size="mini" type="primary"><router-link :to="{name: 'goodsinfo', params: {sku:scope.row.sku}}" tag="span" >商品详情</router-link></el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                searchForm: {
                    goodsname: '',
                    goodsid: '',
                    goodsclass:'',
                    goodsbrand:'',
                    ex_status:'',
                    sell_status:''
                },
                tableData: [{
                    id:1,
                    url:'../../images/baowenbei1.jpg',
                    sku: '10001',
                    goodsname: '保温杯',
                    goodstype: '生活日用',
                    goodsbrand:'暂无',
                    ex_status:'待审核',
                    sell_status:'待上架'  
                    }, {
                    id:2,    
                    url:'../../images/baowenbei2.jpg',
                    sku: '10002',
                    goodsname: '保温杯',
                    goodstype: '生活日用',
                    goodsbrand:'暂无',
                    ex_status:'待审核',
                    sell_status:'待上架'
                    }, {
                    id:3,
                    url:'../../images/baowenbei3.jpg',
                    sku: '10003',
                    goodsname: '保温杯',
                    goodstype: '生活日用',
                    goodsbrand:'暂无',
                    ex_status:'待审核',
                    sell_status:'待上架'
                    }],
                multipleSelection: [],
                currentPage: 1,
                operate:'Excel'
            }
        },
        created(){},
        methods:{
            getgoodslist(){
                // this.$http.get(""+this.pageindex).then(result=>{
                //     if(result.body.status === 0){
                //         this.goodslist = this.goodslist.concat(result.body.message);
                //     }else{
                //          Toast('获取商品列表失败')
                //     }
                // })

            
            },
            getmore(){},
            //编程式导航
            // goDetail(id){
            //     this.$router.push({ name:"goodsinfo",params:{ id }})
            // }
            onSearch() {
                console.log('submit!');
            },
            Delete(){
                var mul=this.multipleSelection;
                this.tableData=this.tableData.filter(function(el){
                    // return !this.multipleSelection.find(el);
                    var result = mul.indexOf(el)==-1
                    return result
                });
                // console.log(this.tableData);
            },
            handleClick(row) {
                console.log(row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log( this.multipleSelection);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                this.tableData.splice(index,1);
                // console.log(index, row);
            },
            handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="scss">
    .goods-list{
        h1{
            font-size: 14px;
            color: #5a5a5a;
            font-weight: 600;
            text-indent: 1.5em;
        }
        .search{
            border-bottom: 3px solid  #e0e0e0;
            margin-top: 10px;
            height: 160px;
            // background-color: #333;
            // border: 1px solid black;
            .searchForm{
                margin-top: 20px;
                .el-form-item{
                    margin-left: 25px;
                    margin-top: 5px;

                    .el-input{
                    width: 130px;
                    }
                    .el-select{
                        width: 130px;
                    }
                    .el-button{
                        width: 166px;
                        margin-left: 14px;
                        background-color: rgb(253, 135, 84);
                        border: none;
                    }
                    .el-button:hover{
                        background-color:rgb(248, 167, 132);
                    }
                }
            }
        }
        .listbox{
            margin-top: 20px;
            // border: 1px solid black;
            // background-color: #999;
            .list_content{
                
                margin-top: 20px;
                // border: 1px solid black;
                height: 100%;
                 .tabbar{
                    // border: 1px solid black;
                    width: 900px;
                    margin: 0 auto;
                    .el-form-item{
                        
                        // margin-left: 25px;
                        // margin-top: 5px;
                        .el-select{
                            width: 140px;
                        }
                        .el-button{
                            width: auto;
                            margin-left: 14px;
                            // background-color: rgb(253, 135, 84);
                            // border: none;
                            // color: white;
                        }
                        .el-button:hover{
                            background-color: rgb(253, 135, 84);
                            border-color:  rgb(253, 135, 84);
                            color: white;
                        }
                    }
                }

                .list_show{
                    width: 95%;
                    // border: 1px solid black;
                    padding-left: 20px;
                    
                    .el-table th.gutter{
                    display: table-cell!important;
                    }	
                }
                .page{
                    margin-top: 30px;
                    height: 40px;
                    // border: 1px solid black;
                    text-align: center;
                }
            }         
        }
    }
</style>

